<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/jquery-1.10.1.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {

      width: 200px;
      height: 200px;
      background-color: #6ff;
      margin: 20px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>
<script>

  // GetEle.prototype.click = function(fn){
  //     this.on("click",fn)
  // }

  // jquery中绑定事件的方法  on   (所有的事件都是基于on方法二次封装 实现的)
  // $(ele).on(eventType,data,callback)    普通绑定
  // ele        绑定事件的元素 (获取的元素)
  // eventType  绑定的事件类型
  // data       事件触发时携带的数据(可写可不写)
  // callback   事件触发时执行的回调函数

  /* $(".box").click(function(){
      $(this).css({background:"red"})
  })
  $(".box").on("click",{a:1,b:2},function(e){
      console.log(e.data);
  })
  $(".box").on("mouseenter",function(e){
      console.log("鼠标滑过....");
  })
  $(".box").on("mousedown",function(e){
      console.log(e.button);
  }) */


  // jquery中清除绑定事件的方法  off  
  // $(ele).off(eventType,callback)    
  // ele        绑定事件的元素 (获取的元素)
  // eventType  绑定的事件类型
  // callback   事件触发时执行的回调函数

  function clickHandler_1() {
    $(this).css({ background: "red" })
  }
  function clickHandler_2(e) {
    console.log(e.data);
  }
  function mouseenterHandler(e) {
    console.log("鼠标滑过....");
  }
  function mousedownHandler(e) {
    console.log(e.button);
  }

  $(".box").click(clickHandler_1);
  $(".box").on("click", { a: 1, b: 2 }, clickHandler_2);
  $(".box").on("mouseenter", mouseenterHandler);
  $(".box").on("mousedown", mousedownHandler);



    // off()   
    // (1)  对应回调函数清除   (一个一个清除)
    // $(".box").off("click",clickHandler_1);
    // $(".box").off("click",clickHandler_2);
    // $(".box").off("mouseenter",mouseenterHandler);
    // $(".box").off("mousedown",mousedownHandler);

    // (2)  清除同种类型的事件
    // $(".box").off("click");

    // (3) 清除匹配元素上所有类型的事件
    // $(".box").off();







</script>

</html>